 
import { Link, useLocation } from 'react-router-dom'
import type { RouteItem } from '../type/route'
import { routes } from '../routes'
// import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';

type MenuItem = Required<MenuProps>['items'][number];

function formatMenuItems(routes: RouteItem[], parentPath = ''): MenuItem[] {
  return routes.map(route => {
    const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/')
    
    if (route.children?.length) {
      return {
        key: fullPath,
        icon: route.icon,
        label: route.name,
        children: formatMenuItems(route.children, fullPath)
      }
    }
    
    return {
      key: fullPath,
      icon: route.icon,
      label: <Link to={fullPath}>{route.name}</Link>
    }
  })
}

// 导出一个名为 SideMenu 的默认函数组件
export default function SideMenu() {
 
    const location = useLocation()
    const selectedKeys = [location.pathname]
    const defaultOpenKeys = ['/admin/system']
 

  return (
    <Menu
    mode="inline"
    selectedKeys={selectedKeys}
    defaultOpenKeys={defaultOpenKeys}
    items={formatMenuItems(routes[1].children!, '/admin')}
    style={{ 
      borderRight: 0,
      padding: '8px 0' 
    }}
    theme="light"
    inlineIndent={16}
  />
  )
}